<template>
    <div class="app-container">
        <h1>{{ titleName }}</h1>
        <el-card shadow="hover" style="height:160px" v-if="this.titleName == '详情'">
            <div style="width:1140px;height:150px;margin-top: 20px;">
                <img src="../../assets/avatar/管理-圆.png" style="width:70px;height: 70px;float: left;" />
                <div style="margin-left:25px;float:left;margin-top: -20px;">
                    <span style="font-weight: 900;font-size: large;">
                        {{ cinemaForm.cinemaName }}
                    </span><br><br>
                    <span style="font-size: small;margin-top: 10px;">影院编号： {{ cinemaForm.cinemaNumber
                    }}</span><br><br>
                    <span style="font-size: small">
                        管理员： {{ cinemaForm.admin }}
                    </span><br><br>
                    <!-- <span style="font-size: small">
                                    联系人电话：{{ cinemaForm.phone }}
                                </span><br> -->
                </div>
                <div style="float:left;margin-left: 110px;font-size:small">
                    <span style="float: left">
                        <span>入驻时间：{{ cinemaForm.entryTime }}</span><br><br>
                        <span>影院联系人：{{ cinemaForm.principal }}</span><br><br>
                        <span><el-button type="info">查看联系人信息</el-button></span>
                    </span>
                </div>
                <div style="float:left;margin-left: 220px;margin-top: -10px;">
                    <div style="width:120px;height:105px;border-left: dashed 2px;float:left;">
                        <span style="margin-left: 45px;">
                            <svg-icon icon-class="播放" style="width:30px;height:30px"></svg-icon><br>
                            <div style="width:120px;height:105px;text-align: center;">
                                <br><i style="font-size: small;">在映电影数</i><br>
                                <i>35</i>
                            </div>
                        </span>
                    </div>
                    <div style="width:120px;height:105px;float:left;">
                        <span style="margin-left: 45px;">
                            <svg-icon icon-class="新订单" style="width:30px;height:30px"></svg-icon><br>
                            <div style="width:120px;height:105px;text-align: center;">
                                <br><i style="font-size: small;">订单数量</i><br>
                                <i>54</i>
                            </div>
                        </span>
                    </div>
                    <div style="width:120px;height:105px;float:left;">
                        <span style="margin-left: 45px;">
                            <svg-icon icon-class="金额" style="width:30px;height:30px"></svg-icon><br>
                            <div style="width:120px;height:105px;text-align: center;">
                                <br><i style="font-size: small;">交易金额</i><br>
                                <i>65474</i>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
        </el-card>
        <el-form ref="form" :model="cinemaForm" label-width="120px" > <!--:disabled=!showBtn-->

            <el-form-item label="影院名称" style="margin-top: 20px;">
                <el-input v-model="cinemaForm.cinemaName" :readonly=!showBtn placeholder="请输入" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="影院地址" style="margin-top: 20px;">
                <el-input v-model="cinemaForm.address" :readonly=!showBtn placeholder="请输入" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="影院负责人" style="margin-top: 20px;">
                <el-input v-model="cinemaForm.principal" :readonly=!showBtn placeholder="请输入" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="影院管理员" v-if="loginUserRole == 'superAdmin'">
                <el-select v-model="cinemaForm.admin" :disabled=!showBtn>
                    <el-option v-for="item in adminList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="影院状态">
                <el-select v-model="cinemaForm.status" :disabled=!showBtn>
                    <el-option v-for="item in cinemaStatusList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="影院邮箱" style="margin-top: 20px;">
                <el-input v-model="cinemaForm.cinemaEmail" :readonly=!showBtn placeholder="请输入" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="影院公众号" style="margin-top: 20px;">
                <el-input v-model="cinemaForm.cinemaVx" :readonly=!showBtn placeholder="请输入" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="影院营业时间" style="margin-top: 20px;">
                <!-- <el-input v-model="cinemaForm.businessHours" placeholder="请输入" style="width: 360px;"></el-input> -->
                <el-time-picker format="HH:mm" :readonly=!showBtn is-range v-model="cinemaOCTime" range-separator="至" start-placeholder="开始时间"
                    end-placeholder="结束时间" placeholder="选择时间范围">
                </el-time-picker>
            </el-form-item>

            <!-- <el-form-item label="影院环境" style="margin-top: 20px;">
                        <el-input v-model="cinemaForm.cinemaPic" placeholder="请输入" style="width: 360px;"></el-input>
                    </el-form-item> -->

            <el-form-item label="入驻时间" style="margin-top: 20px;" v-if="showNoSee">
                <!-- <el-input v-model="cinemaForm.entryTime" placeholder="请输入" style="width: 360px;"></el-input> -->
                <el-date-picker v-model="cinemaForm.entryTime" readonly type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>

<!-- 
            <el-form-item label="创建人" v-if="showNoSee">
                <el-input v-model="cinemaForm.createBy" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="创建时间" v-if="showNoSee">
                <el-input v-model="cinemaForm.createTime" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="更新人" v-if="showNoSee">
                <el-input v-model="cinemaForm.updateBy" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="更新时间" v-if="showNoSee">
                <el-input v-model="cinemaForm.updateTime" style="width: 360px;"></el-input>
            </el-form-item> -->

        </el-form>

        <div style="margin-left: 120px;">
            <el-button type="primary" @click="onSubmit" v-if="showBtn">保存</el-button>
            <el-button @click="back">取消</el-button>
        </div>
    </div>
</template>

<script>
import { importDic } from '@/utils'
import { getCinemaDetail, addOrUpdateCinema, getAdmin } from '@/api/cinema'
import { getToken } from '@/utils/auth'

export default {
    data() {
        return {
            cinemaForm: {
                cinemaLogo: '',
                cinemaName: '',
                cinemaNumber: '',
                principal: '',
                entryTime: '',
                admin: '',
                address: '',
                status: 1,
                createBy: '',
                createTime: '',
                updateBy: '',
                updateTime: '',
                loading: 0,
                businessHours:''
            },
            loginUserRole: JSON.parse(sessionStorage.getItem("loginUserRole"))[0],
            loginUser: JSON.parse(sessionStorage.getItem("loginUser")),
            cinemaOCTime:['Sun Feb 19 2023 10:00:00 GMT+0800','Sun Feb 19 2023 22:00:00 GMT+0800'],
            showNoSee: false,
            showBtn: true,
            titleName: '',
            mode: this.$route.query.mode,
            id: this.$route.query.id,
            formDisabled: false,
            cinemaStatusList: importDic('cinemaStatus'),
            adminList: [],
        }
    },
    watch: {
        mode: {
            handler: function (mode) {
                if (this.mode === 'add') {
                    this.titleName = '新建'
                }
                if (this.mode === 'edit') {
                    this.titleName = '编辑'
                    this.getCinemaDetail()
                }
                if (this.mode === 'detail') {
                    this.titleName = '详情'
                    this.formDisabled = true
                    this.showBtn = false
                    this.showNoSee = true
                    this.seeCommentButton = true
                    this.getCinemaDetail()
                }
            },
            immediate: true
        }
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate().then(() => {
                this.loading++
                if(this.loginUserRole == 'admin'){
                    this.cinemaForm.admin = this.loginUser
                }
                this.cinemaForm.updateTime = ''
                this.cinemaForm.entryTime = new Date(this.cinemaForm.entryTime)
                var a = new Date(this.cinemaOCTime[0]).toString().slice(16,21)
                var b = new Date(this.cinemaOCTime[1]).toString().slice(16,21)
                this.cinemaForm.businessHours = a + '-' + b
                console.log(this.cinemaForm.businessHours)
                addOrUpdateCinema(this.cinemaForm, getToken()).then(res => {
                    this.$router.push("/cinema")
                    this.$message.success(res.message)
                }).catch(e => console.error(e)).finally(() => this.loading--)
            }).catch(e => console.error(e))
        },
        back() {
            this.$router.push("/cinema");
        },
        getCinemaDetail() {
            this.loading++
            console.log(sessionStorage.getItem("loginUserRole")[0])
            getCinemaDetail(this.id, getToken()).then(res => {
                console.log('getCinemaDetail' + res.result)
                this.cinemaForm = res.result
                var c = this.cinemaForm.businessHours.slice(0,5)
                var d = this.cinemaForm.businessHours.slice(6,11)
                this.cinemaOCTime = ['Sun Feb 19 2023 ' + c + ':00 GMT+0800','Sun Feb 19 2023 ' + d + ':00 GMT+0800']
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        getAdmin() {
            this.loading++
            getAdmin(getToken()).then(res => {
                for(var i=0; i< res.result.length; i++){
                    this.adminList.push({label: res.result[i], value: res.result[i]})
                }
            }).catch(e => console.error(e)).finally(() => this.loading--)
            console.log(this.adminList)
        }
    },
    mounted() {
        this.getAdmin()
    }
}
</script>